<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>产品管理</title>
    <link rel="stylesheet" href="../css/common.css">
    <link rel="stylesheet" href="../css/style_zj.css">
    <link rel="stylesheet" href="../layui/css/layui.css">
    <link rel="stylesheet" href="../fonts/iconfont.css">
    <link rel="stylesheet" href="../css/select2.css">
    <style>
        .select2-container--default .select2-selection--single .select2-selection__arrow{
            height: 38px;
        }
        .select2-container--default .select2-selection--single .select2-selection__rendered{
            line-height: 38px;
        }
        .select2-container .select2-selection--single{
            height: 38px;
            border-color: #D2D2D2!important;
            border-radius: 2px;
        }
        .select2-container{
            white-space: pre;
        }
    </style>
</head>
<body>
<div class="addPersonClass-modal hide">
    <div class="mask-class js-closePersonClassModal"></div>
    <div class="class-person-content">
        <div class="title">
            <span>追加自定义分类</span>
            <span class="icon_close close_mode"></span>
        </div>
        <div>
            <div class="clearfix pl10">
                <div class="fl" style="position: relative;top: 10px">选择分类：</div>
                <div class="fl">
                    <select name="" id="custom1" class="wid220">
                        <option value="">请选择</option>
                    </select>
                </div>

            </div>
        </div>
        <div style="clear: both;margin-top: 50px" class="pr10">
            <span class="fr button1 js-closePersonClassModal">取消</span><span class="fr button1 js-okAddClass">确认</span>
        </div>
    </div>
</div>
<!--<div id="header_01_html">
    <iframe id="header_01" src="head_01.html" frameborder="0"></iframe>
</div>-->
<div class="content-box">
    <!--<div id="left_tab_html">
        <iframe id="left_tab" src="left_tab.html?x=1&y=2" frameborder="0"></iframe>
    </div>-->
    <div class="right-box layui-form" id="vue-box" v-cloak>
        <div class="content-admin">
            <div class="title-toggle">
                <div class="item "><a href="product_admin.html">供应信息</a></div>
                <div class="item active">求购信息</div>
            </div>
            <div class="search-box clearfix">
                <div class="list-sty clearfix">
                    <span class="k-name">图号 / 名称</span>
                    <input type="text" class="layui-input input-v js-name">
                </div>
                <div class="list-sty clearfix">
                    <span class="k-name">自定义分类</span>
                    <div class="li clearfix">
                        <div class="select-sty1 p-r">
                            <div class="box-select2">
                                <select name="" id="custom" class="wid220">
                                    <option value="">请选择</option>
                                </select>
                            </div>
                            <span class=""></span>
                        </div>
                    </div>
                </div>
                <div class="list-sty clearfix">
                    <span class="k-name">价格区间</span>
                    <!--<input type="text" class="layui-input input-v">-->
                    <div class="select-v wid-100" style="margin-right: 20px">
                        <input type="text" class="layui-input input-v wid-100 js-startPrice">
                        <!--<select name="city" lay-verify="">-->
                        <!--<option value="">请选择一个城市</option>-->
                        <!--<option value="010">北京</option>-->
                        <!--<option value="021">上海</option>-->
                        <!--<option value="0571">杭州</option>-->
                        <!--</select>-->
                    </div>
                    <div class="select-v wid-100">
                        <input type="text" class="layui-input input-v wid-100 js-endPrice">
                        <!--<select name="city" lay-verify="">-->
                        <!--<option value="">请选择一个城市</option>-->
                        <!--<option value="010">北京</option>-->
                        <!--<option value="021">上海</option>-->
                        <!--<option value="0571">杭州</option>-->
                        <!--</select>-->
                    </div>
                </div>
                <div class="list-sty clearfix">
                    <span class="k-name">产品状态</span>
                    <!--<input type="text" class="layui-input input-v">-->
                    <div class="select-v">
                        <select name="city" lay-verify="" class="js-status">
                            <option value="">请选择状态</option>
                            <option value="0">上架</option>
                            <option value="1">下架</option>
                        </select>
                    </div>
                </div>

                <div class="list-sty clearfix">
                    <span class="k-name">授权品牌</span>
                    <div class="li clearfix">
                        <div class="select-sty1 p-r">
                            <div class="box-select2">
                                <select name="" id="brandBox" class="wid220">
                                    <option value="">请选择</option>
                                </select>
                            </div>
                            <span class=""></span>
                        </div>
                    </div>
                    <div class="search-btn">
                        <div class="fr">
                            <span class="btn-sty11 js-searchList">搜索</span>
                        </div>
                    </div>
                </div>

            </div>
            <div>
                <div class="operation-title">
                    <span class="btn-sty22 mr-15 js-addPersonClass">追加自定义分类</span>
                    <!--<span class="btn-sty22 mr-15 btn-add-sty js-del">删除</span>-->
                    <span class="btn-sty22 mr-15 js-statusDown" data-status="1">下架</span>
                    <span class="btn-sty22 mr-15 js-statusUp" data-status="1">上架</span>
                </div>
                <div class="table-list">
                    <table>
                        <thead>
                        <tr>
                            <th class="js-allCheck">
                                <input type="checkbox" id="checkAll" name="" title="全选" lay-skin="primary" lay-filter="checkAll">
                            </th>
                            <th>图片</th>
                            <th>标题</th>
                            <!--<th>品类</th>-->
                            <th>价格</th>
                            <th>状态</th>
                            <th>操作</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr v-for="item in pagList">
                            <td class="js-onlyCheck"><input type="checkbox" :id="item.id" name="" lay-skin="primary" lay-filter="checkIt"></td>
                            <td><img :src="imgBaseUrl + item.picUrl" alt="" class="img-sty"></td>
                            <td>{{item.name}}</td>
                            <!--<td>完成</td>-->
                            <td class="col-sty1">¥{{item.price}}</td>
                            <td class="">{{item.state==0?'上架':'下架'}}</td>
                            <td>
                                <div>
                                    <div class="btn-fun js-edit" :bread="item.commodityType" :id="item.id">修改</div>
                                    <!--<div class="btn-fun">分享</div>-->
                                </div>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                    <div id="test1" class="text-r"></div>
                </div>
            </div>
        </div>
        <div class="header-detail">
            <div class="info-item">
                <div class="title-info"><span class="icon-sty"></span>信息管理小贴士</div>
                <div class="detail-info">修改： 完善信息内容，提高信息质量；信息质量越高，越能吸引买家。</div>
            </div>
            <div class="info-item">
                <div class="title-info"><span class="icon-sty"></span>温馨提示</div>
                <div class="detail-info">1、请您务必确认您所发的信息真实、合法、准确、及时，未侵犯他人合法权利，以免导致不必要的纠纷</div>
                <div class="detail-info">2、对于已发布上网的信息，汽配人仍将保留复查的权力。一旦发现问题，该信息将会从网上撤出！</div>
            </div>
        </div>
    </div>
</div>
<!--<div>
    <iframe src="footer-record.html" style="width: 100%;border: none;height:60px;"></iframe>
</div>-->
<script src="../js/config.js"></script>
<script src="../js/select2.full.js"></script>
<script>
    //自定义分类
    get_ajax("/sys/customType/getAllList",{storeId:localStorage.getItem('storeId')},function (data) {
        var selectData = [];
        data.forEach(function (item) {
            item.text = item.name;
            selectData.push(item)
            item.subordinate.forEach(function(data){
                data.text = '\t'+data.name
                selectData.push(data)
            })
        })
        console.log(selectData);
        $("#custom").select2({
            data: selectData,
            placeholder: '请选择',
            allowClear: true,
        })
        $("#custom1").select2({
            data: selectData,
            placeholder: '请选择',
            allowClear: true,
        })
    })


    var postData = {
        limit:5,
        offset:1,
        type:'',
        name:'',
        state:'',
        originId:'',
        startPrice:'',
        endPrice:'',
        customType:'',
    }

    var app = new Vue({
        el: '#vue-box',
        data: {
            pagList:'',
            imgBaseUrl: imgBaseUrl,
        },
        mounted:function(){
            this.getPage();
            get_ajax("/sys/origin/getAllNewPage", {}, function (data) {
                data.forEach(function (item) {
                    item.text = item.name;
                })
                $("#brandBox").select2({
                    data: data,
                    placeholder: '请选择',
                    allowClear: true
                })
            })
        },
        updated:function () {
            layui.use('form', function(){
                var form = layui.form;
                form.render("checkbox");
            });
        },
        methods:{
            getPage:function(){
                var that = this;
                get_ajaxPage("/sys/storeCommodity/getMyBuyPage", postData, function (data) {
                    data.data.forEach(function (item) {
                        item.picUrl = item.picUrl.split(",")[0];
                    })
                    that.pagList = data.data;
                    layui.use('laypage', function(){
                        var laypage = layui.laypage;
                        //执行一个laypage实例
                        laypage.render({
                            elem: 'test1'
                            ,count: data.count //数据总数，从服务端得到
                            ,limit:postData.limit
                            ,jump: function(obj, first){
                                //obj包含了当前分页的所有参数，比如：
                                console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。
                                console.log(obj.limit); //得到每页显示的条数

                                //首次不执行
                                if(!first){
                                    //do something
                                    postData.offset = obj.curr;
                                    get_ajaxPage("/sys/storeCommodity/getMyPage", postData, function (data) {
                                        data.data.forEach(function (item) {
                                            item.picUrl = item.picUrl.split(",")[0];
                                        })
                                        that.pagList = data.data;
                                    })
                                }
                            }
                        });
                    });
                })



            }
        }
    });

    $(document).on('click','.js-searchList',function(){  //搜索
        postData.startPrice = $('.js-startPrice').val();
        postData.endPrice = $('.js-endPrice').val();
        postData.name = $('.js-name').val();
        postData.state = $('.js-status').val();
        postData.originId = $("#brandBox").val();
        postData.customType = $("#custom").val();
        postData.offset = 1;
        app.getPage();
    })


    layui.use('form', function(){  //2级联动
        var form = layui.form;
        form.render("checkbox");
        form.on('checkbox(checkAll)', function(data){    //layui-触发事件
            var checked = data.elem.checked;
            $("tbody input[type=checkbox]").prop("checked",checked);
            form.render("checkbox");
        });
        form.on('checkbox(checkIt)', function(data){
            var checked = data.elem.checked;
            var allLength = $("tbody input[type=checkbox]").length;
            var checkLength = $("tbody input[type=checkbox]:checked").length;
            $("#checkAll").prop("checked",allLength == checkLength);
            form.render("checkbox");
        });
    });



    $(document).on('click','.js-del',function(){//    删除
        $('tbody').find("input[type='checkbox']").length;
        console.log($('tbody').find("input[type='checkbox']:checked").length);

    })

    $(document).on('click','.js-statusDown',function(){//   下架
        var arr = [];
        $('tbody').find("input[type='checkbox']:checked").each(function(){
            arr.push($(this).attr('id'));
        })
        if(arr.length<1){
            layer.msg('请选择商品')
            return
        }
        var arrStr = String(arr);
        get_ajax("/sys/storeCommodity/del", {ids:arrStr}, function (data) {
            layer.msg('下架成功！');
            app.getPage();
            layui.use('form', function(){
                var form = layui.form;
                $("table input[type=checkbox]").prop("checked",false);
                form.render("checkbox");
            });
        })
    })

    $(document).on('click','.js-statusUp',function(){//   上架
        var arr = [];
        $('tbody').find("input[type='checkbox']:checked").each(function(){
            arr.push($(this).attr('id'));
        })
        if(arr.length<1){
            layer.msg('请选择商品')
            return
        }
        var arrStr = String(arr);
        get_ajax("/sys/storeCommodity/grounding", {ids:arrStr}, function (data) {
            layer.msg('上架成功！');
            app.getPage();
            layui.use('form', function(){
                var form = layui.form;
                $("table input[type=checkbox]").prop("checked",false);
                form.render("checkbox");
            });
        })
    })

    $(document).on('click','.js-edit',function(){
        var id = $(this).attr('id');
        var bread = $(this).attr('bread').replace(/\,/g,">")
        window.open('release_purchase_edit.html?id='+id+'&bread='+bread);
    })


    var addClassId = '';
    $('.js-addPersonClass').click(function(){
        var arr = [];
        $('tbody').find("input[type='checkbox']:checked").each(function(){
            arr.push($(this).attr('id'));
        })
        if(arr.length<1){
            layer.msg('请选择商品')
            return
        }
        addClassId = String(arr);
        $('.addPersonClass-modal').removeClass('hide');
    })
    $('.js-closePersonClassModal,.icon_close').click(function(){
        $('.addPersonClass-modal').addClass('hide');
    })
    $('.js-okAddClass').click(function(){
        var customType = $('#custom1').find('option:checked').html().trim()
        console.log(customType);
        get_ajax("/sys/storeCommodity/setCustomType", {ids:addClassId,customType:customType}, function (data) {
            layer.msg('添加成功！');
            layui.use('form', function(){
                var form = layui.form;
                $("table input[type=checkbox]").prop("checked",false);
                form.render("checkbox");
            });
        })
    })

</script>
</body>
</html>